<template>
  <div class="today-blog-container">

    <div class="box">
      <div class="t-header">
        <IconAli :sty="{width:'20px',height:'20px',marginTop:'10px'}" icon='hot'></IconAli>
        <div class="t-title">
          热点博文
        </div>
      </div>

      <!--滚动插件-->
      <vue-seamless-scroll :data="blogList" class="blog-box" :class-option="optionSingle">

        <div v-for="(obj,i) in blogList"
             :key="obj.blogId" class="blog"
             :id="obj.blogId"
             @mouseenter="hover(obj.blogId)"
             @mouseleave="over(obj.blogId)"
             @click="go(obj)">

          <div class="single">

            <img :src="obj.url">
            <div class="title">
              {{ obj.title }}
            </div>

          </div>
        </div>

      </vue-seamless-scroll>

    </div>

  </div>
</template>

<script>
/**
 * npm install vue-seamless-scroll --save
 *
 * main.js 中引入
 * import scroll from 'vue-seamless-scroll'
 * Vue.use(scroll)
 *
 * 在线文档 https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others
 */
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "TodayBlog",
  props: [],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {
      blogList: [
        {
          blogId: "1",
          url: "https://i.picsum.photos/id/768/200/200.jpg?hmac=CZCVsqJECKhkvl5gzeCA0O5iSMmRn_RVFzVrREOE7ws",
          title: "是什么让人们永远在线",
          desc: "如果一个野人想找另一个，只能亲自去找，如果他不在，只能回去，然后随机退避一段时间再去试试运气。这种效率不可能让野人们认识太多人，因此原始部落一般不会太大"
        },
        {
          blogId: "2",
          title: "【历史上的今天】11 月 8 日：计算机先驱诞生日；卷积神经网络 LeNet-5 问世；特斯拉发明遥控器",
          url: "https://i.picsum.photos/id/545/200/200.jpg?hmac=kDM7O5d6Tf22m2hu2UChghwNG-KvIuZzEQg5Dk-g3gQ",
          desc: "遥控是指一种远程控制技术，用来遥控机械的装置称为遥控器；现代的遥控器，主要是由集成电路电板和用来产生不同讯息的按钮所组成。遥控技术在工业生产、军事以及科研上均有着大量的应用。如今，到底是谁发明出第一个遥控器已不可考，但最早的遥控器之一，被认为是尼古拉·特斯拉（Nikola Tesla）所发明，他是一位塞尔维亚裔美国人，一生所有的发明和专利达 700 多项版权声明：本文为CSDN博主「历史上的今天」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。\n" +
              "原文链接：https://blog.csdn.net/Byeweiyang/article/details/121196929"
        },
        {
          blogId: "3",
          title: "1024 / 2021长沙·中国1024程序员节公开PPT汇总 ",
          url: "https://i.picsum.photos/id/667/200/200.jpg?hmac=Dqc51PnEPXpiiStRcDoPxytal0MOGvzg-eDZ4BsVIz8",
          desc: "神州瑞景公司不服，诉至法院。一审败诉后，公司继续上诉，直到2021年6月，法院做出二审裁决，驳回了神州景瑞的上诉，并宣布此判决为终审判决神州瑞景公司不服，诉至法院。一审败诉后，公司继续上诉，直到2021年6月，法院做出二审裁决，驳回了神州景瑞的上诉，并宣布此判决为终审判我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉决"
        },
        {
          blogId: "4",
          url: "https://i.picsum.photos/id/921/200/200.jpg?hmac=6pwJUhec4NqIAFxrha-8WXGa8yI1pJXKEYCWMSHroSU",
          title: "因程序员开发速度太慢，公司索赔90万败诉后不服申请再审，法院判了",
          desc: "原以为事情已经告一段落，不料该公司对二审不服，向北京市高级人民法院申请再审，请求撤销一、二审民事判决。2021年11月3日，中国裁判文书网公布了该事件的民事裁定书我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "5",
          url: "https://i.picsum.photos/id/271/200/200.jpg?hmac=ZEj4e_twCOPm3eoBeBMIKpcbFcD7s8TwRPMuyhLmqPk",
          title: "公司因不满公司某程",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "6",
          url: "https://i.picsum.photos/id/127/200/200.jpg?hmac=WYBTvlVHFeXjWOUvDgKRt6YUtVxGF2ZdUGO9aoYimdg",
          title: "来打官司，并且提出90万的高价赔款呢？从法院",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "7",
          url: "https://i.picsum.photos/id/822/200/200.jpg?hmac=pXgRn-rbZIan3GYBv9xCVsdyt_Kzq5Q_d0AbLnzeT3k",
          title: "海深仇”，以至于公司花了近两年",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "8",
          url: "https://i.picsum.photos/id/969/200/200.jpg?hmac=p4_e12QQOwtyNXXwJjJs_2kwmu87KZGqAhiUV8goVos",
          title: "的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "9",
          url: "https://i.picsum.photos/id/419/200/200.jpg?hmac=yUYGIG3hJhzafcgOl8Drs4iTsia3HynizHXh8nTcvEQ",
          title: "0万的高价赔款呢？从法院公布的文书",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
        {
          blogId: "10",
          url: "https://i.picsum.photos/id/250/200/200.jpg?hmac=23TaEG1txY5qYZ70amm2sUf0GYKo4v7yIbN9ooyqWzs",
          title: "大闸蟹巅峰时期来了！只只都爆膏流心！双十一特惠价，忍不了啦！",
          desc: "该公司与这位程序员究竟有何“血海深仇”，以至于公司花了近两年的时间来打官司，并且提出90万的高价赔款呢？从法院公布的文书中，我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉我们理清了事件的来龙去脉"
        },
      ],
    }
  },
  //计算属性
  computed: {
    //单行属性
    optionSingle() {
      return {
        step: 0.2,               //轮播速度
        //singleHeight: 80,      //单行
        //waitTime: 5000,        //单行停顿时间
        //hoverStop:false,     //鼠标悬停是否关闭
      }
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    hover(id) {
      let div = document.getElementById(id);
      div.style.boxShadow = '0px 0px 3px 2px #BBB'
    },
    over(id) {
      let div = document.getElementById(id);
      div.style.boxShadow = ''
    },
    go(obj) {
      window.open("https://www.baidu.com", "_blank")
    }
  },
  //钩子函数
  mounted() {

  }
}
</script>

<style lang="less" scoped>
.today-blog-container {
  .box {
    .t-header {
      border-bottom:1px solid #AAA;
      //box-shadow: 0px 0px 3px 1px #fc3434;
      padding-left: 6px;
      display: flex;
      cursor: pointer;
      //background-color: #EFEFEF;
      //padding-bottom: 15px;

      .t-title {
        height: 40px;
        font-size: 18px;
        //font-weight: bolder;
        color: #333;
        line-height: 40px;
        padding:2px 0px 0px 6px;
      }
    }

    @blog-height: 80px; //单个博客高度

    .blog-box {
      height: 5*@blog-height;
      overflow: hidden;
      padding: 15px 0px;
      margin-top: 10px;

      .blog {
        height: @blog-height;
        //border:1px solid #000000;
        border: 1px solid #9e9a9a;
        width: 98%;
        margin-left: 1%;
        margin-top: 10px;
        cursor: pointer;

        .single {
          display: flex;

          img {
            display: inline-block;
            width: 66px;
            height: 66px;
            margin-top: 6px;
            margin-left: 10px;
          }

          .title {
            //padding: 10px 0px 0px 6px;
            line-height: @blog-height;
            height:@blog-height;
            padding-left: 10px;
            font-size: 16px;
            color: #000000;
            font-weight: bolder;
            white-space: nowrap; //强制一行
            overflow: hidden; //超出隐藏
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>